<template>
  <base-card>
    <!-- 标题 -->
    <div class="outermost-layer">
      <!-- 标题 -->
      <div class="top-outer-layer">
        <div class="border-left"></div>
        <div class="add-text">{{ addOrUpdate }}</div>
      </div>
      <div class="doc-info">医生信息</div>
      <!-- 表单 -->
      <div>
        <el-form :inline="true" :model="formItem" label-width="auto" class="demo-form-inline" :rules="rules"
          require-asterisk-position="right">
          <el-form-item label="医生编号">
            <div style="width: 200px;height: 40px; margin-right: 50px;">111111111</div>
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input placeholder="请输入有效手机号码" v-model="formItem.phone"
              style="width: 200px; height: 40px;  margin-right: 50px;" />
          </el-form-item>

          <el-form-item label="医生头像">
            <el-upload class="avatar-uploader" :action="`${baseURL}/images/upload`" :show-file-list="false"
              :on-success="handleAvatarSuccess">
              <img v-if="formItem.avatar" :src="formItem.avatar" class="avatar" />
              <div v-else>
                <el-avatar :icon="UserFilled" shape="square" style="margin-right: 10px;" />
                <el-link type="primary">+点击上传</el-link>
              </div>
            </el-upload>
          </el-form-item>

          <el-form-item label="医生姓名" prop="name">
            <el-input placeholder="请输入" v-model="formItem.name" clearable
              style="width: 200px; height: 40px; margin-right: 50px;" />
          </el-form-item>
          <el-form-item label="医生角色" prop="roleId">
            <el-select v-model="formItem.roleId" multiple placeholder="请选择" style="width: 200px; margin-right: 50px;">
              <el-option v-for="item in roleData.rows" :key="item._id" :value="item._id">
                <el-checkbox />
                <span style="margin-left: 8px">{{ item.name }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="登录密码" prop="password">
            <el-input placeholder="请输入" v-model="formItem.password" clearable style="width: 200px; height: 40px; " />
          </el-form-item>
          <el-form-item label="性别">
            <el-select placeholder="请选择" v-model="formItem.gender" clearable
              style="width: 200px;height: 40px; margin-right: 50px;">
              <el-option label="男" :value="1" />
              <el-option label="女" :value="0" />
            </el-select>
          </el-form-item>

          <el-form-item label="所属机构" style="height: 40px;">
            <el-select placeholder="请选择" clearable v-model="formItem.organizationId" style="width: 200px;height: 40px;">
              <el-option :label="item.name" :value="item._id" v-for="item in organizationsData.rows" :key="item._id" />
            </el-select>
          </el-form-item>

          <div style="display: flex; flex-direction: column;line-height: 1; padding-top: 0;">
            <el-form-item label="医生简介">
              <el-input style="width: 400px; height: 120px;" type="textarea" />
            </el-form-item>
            <el-form-item label="医生擅长">
              <el-input style="width: 400px; height: 120px;" type="textarea" />
            </el-form-item>
          </div>
          <el-form-item>
            <el-button type="primary" @click="onComfirm">保存</el-button>
            <el-button @click="onBack">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </base-card>
</template>

<script setup lang="ts">
import { UserFilled } from '@element-plus/icons-vue'
import { computed, onMounted, ref } from 'vue';
import BaseCard from '../../components/base-card/BaseCard.vue';
import { useRouter } from 'vue-router';
import { useFindData } from '../../composables/findData';
import { addDoctorsApi, detailDoctorsApi, updateDoctorsApi } from '../../api/doctors';
import { useRoute } from 'vue-router';
import { detailOrganizationsApi } from '../../api/organizations';
const ruleFormRef = ref()
const route = useRoute()
const emit = defineEmits(['findDoctorDataAsync'])
const { organizationsData, findOrganizationsDataAsync, roleData, getRoleDataAsync } = useFindData()
const router = useRouter()
// 保存机构的数据
const organization = ref('')
// 增加的
const formItem = ref({
  phone: '',
  name: '',
  roleId: '',
  password: '',
  avatar: ''
})
// https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png
const rules = ref({
  name: [
    { required: true, message: '账号不能为空', trigger: 'blur' },

  ],
  phone: [
    { required: true, message: '账号不能为空', trigger: 'blur' },

  ],
  roleId: [
    { required: true, message: '账号不能为空', trigger: 'blur' },

  ],
  password: [
    {
      required: true,
      message: '密码不能为空',
      trigger: 'blur',
    },
  ],
})
// 增加的
const onComfirm = () => {
  if (route.params._id) {
    // 修改
    updateDoctor()
  } else {
    getAddDoctor()
  }
}
// 机构的数据
onMounted(() => {
  getOrganizationData()
  getRoleDataAsync()
  getOneDoctor()

})
// 修改数据回显
// 获取一个医生的详情
const getOneDoctor = () => {
  detailDoctorsApi({
    _id: route.params._id
  }).then(res => {
    if (res.code == 200) {
      console.log(res);
      formItem.value = res.data
      organization.value = res.data.organizationId
      getOneOrganData(organization.value)
    }
  })
}
// 添加的请求
const getAddDoctor = () => {
  addDoctorsApi({
    ...formItem.value
  }).then(res => {
    if (res.code == 200) {
      ElMessage({
        type: 'success',
        message: '医生信息添加成功'
      })
      emit('findDoctorDataAsync')
      router.back()
    }
  })
}

// 修改的方法
const updateDoctor = () => {
  updateDoctorsApi({
    ...formItem.value
  }).then(res => {
    if (res.code == 200) {
      // 用户提示信息
      ElMessage({
        message: '医生信息修改成功',
        type: 'success',
      })
      // 重新调用获取数据的方法渲染页面  获取数据库中最新的数据渲染页面
      emit('findDoctorDataAsync')
    }

  })
}
// 拿到机构的数据
const getOrganizationData = () => {
  findOrganizationsDataAsync({
    currentPage: 1,
    pageSize: 10,
    value: organizationsData.rows.name
  })

}
// 根据id获取机构的详情
const getOneOrganData = (_id) => {
  detailOrganizationsApi(_id).then(res => {
    if (res.code == 200) {
      console.log(res);
    }
  })
}
// 上传图片
const baseURL = import.meta.env.VITE_BASE_URL;
const handleAvatarSuccess = (
  res
) => {
  console.log(formItem.value.avatar);

  if (res.code == 200) {
    formItem.value.avatar = res.data;
  }
}
// 计算属性修改名字
const addOrUpdate = computed(() => {
  if (route.params._id) {
    return '编辑医生信息'
  } else {
    return '添加医生信息'
  }
})

const onBack = () => {
  router.back()
  formItem.value = {}
}
</script>

<style scoped>
/* 修改 placeholder 颜色 */
::v-deep .el-input__inner::placeholder {
  color: #ccc;
  /* 浅灰色，可按需调整 */
}

.outermost-layer {
  /* border: 1px solid rgba(41, 132, 248, 1); */
  padding: 20px 20px;
}

.top-outer-layer {
  display: flex;
  height: 45px;
  border-bottom: 1px solid #dcdbdb;
  margin-bottom: 20px;
}

.border-left {
  width: 6px;
  height: 24px;
  background-color: rgba(41, 132, 248, 1);
  border-radius: 10px;
}

.add-text {
  margin-left: 10px;
  font-size: 18px;
  color: rgba(51, 51, 51, 0.898039215686275);
}

.doc-info {
  font-size: 16px;
  color: #333333;
  margin-top: 10px;
  margin-bottom: 30px;
}

.el-form-item .el-select {
  height: 40px;
}

.avatar {
  width: 50px;
  height: 50px;
}
</style>

<style>
.el-select__wrapper {
  height: 40px;
}

.el-form .el-form-item {
  margin-bottom: 16px !important;
}

.el-textarea__inner {
  resize: none !important;
  height: 120px;
}
</style>
